The basics of wireframes
線框圖基礎

什麼是線框圖（Wireframe）

線框圖是產品頁面或介面的草圖或輪廓圖，用來展示頁面中各元素的位置與排列結構。它像建築圖紙一樣，是設計前期的重要工具。

• 結構清晰，通常只包含基礎圖形（矩形、線條）與極簡文字；

• 不涉及配色、字型或真實影象；

• 用於展示頁面佈局（Layout）及使用者流程（User Flow）。

線框圖的作用（Purpose）

1. 明確頁面佈局：幫助設計師確定每個視覺元件的位置；

2. 梳理功能邏輯：展示不同功能元素之間的關係與流程；

3. 快速迭代：能在設計初期快速嘗試多個想法；

4. 團隊協作：用統一的符號規範方便團隊成員理解設計意圖。

線框圖的繪製方式（Paper vs Digital）

紙上繪製（Paper）

• 快速草圖便於自由構思；

• 使用圖形代表不同元素：
  • 橫線表示文字；
  • 帶“X”的矩形表示圖片或圖示；
  • 圓形或矩形表示按鈕或可互動元素；

• 易於丟棄、修改、迭代。

數字繪製（Digital）

• 用於進一步完善線框圖；

• 可在專業工具（如Figma、Adobe XD、Sketch）中完成；

• 適合後期交付與團隊共享。

實操示例：圖書館網站首頁線框圖設計

第一步：列出首頁內容需求

• 頂部導航欄（含Logo、搜尋、發現、捐贈、關於、賬戶、購物車）；

• 頭圖區（Hero Image）和介紹文字；

• 重點展示書籍（分為“摺疊上”和“摺疊下”內容）；

• 頁尾（Logo、社交連結、隱私政策、招聘等）。

第二步：建立多個版本

設計師建立了5種首頁線框圖佈局（A-E），各有特色：

• A方案：大尺寸主圖配文字介紹，傳統新聞類風格；

• B方案：右上角突出的搜尋欄，強調檢索功能；

• C方案：Logo、導航、搜尋集中在一個浮動模組，其他內容獨立展示；

• D方案：將“發現、關於、捐贈”模組融合到首頁主體中；

• E方案：仿搜尋引擎風格，以大搜尋框為核心。

第三步：評估與融合

設計師為每個方案中喜歡的部分新增“星標”，進行優選整合：

• E中的頂部導航標籤；

• A中的大主圖和旁邊文字；

• D中的“發現”推薦區；

• B中的頁尾樣式。

最後，透過整合不同方案中最理想的部分，設計師準備繪製新的合併版本線框圖。

實用建議

1. 不少於5種方案：每個重要頁面建議繪製5種以上結構草圖；

2. 從“上至下”繪圖：從頭部逐步佈局到底部，符合使用者瀏覽習慣；

3. 關注“摺疊上”區域：即使用者無需滾動就能看到的首屏內容，資訊優先順序應最高；

4. 組合優點、反覆迭代：對比分析不同設計優缺點，融合後重繪出理想版本；

5. 自由嘗試，鼓勵創新：不怕“看似古怪”的方案，創新來源於嘗試。